@extends('layout.master')

@section('title','角色管理')

@section('css')
    @parent
    <!-- animation CSS -->
    <link href="{{ asset('css/animate.css') }}" rel="stylesheet">
    <!--alerts CSS -->
    <link href="{{ asset('plugins/bower_components/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css">
    <!--My admin Custom CSS -->
    <link href="{{ asset('plugins/bower_components/owl.carousel/owl.carousel.min.css') }}" rel="stylesheet"
          type="text/css"/>
    <link href="{{ asset('plugins/bower_components/owl.carousel/owl.theme.default.css') }}" rel="stylesheet"
          type="text/css"/>
    <!-- Popup CSS -->
    <link href="{{ asset('plugins/bower_components/Magnific-Popup-master/dist/magnific-popup.css') }}" rel="stylesheet">
    <style>
        .floating-labels .radioInput label {
            position: static;
        }

    </style>
@endsection
@section('main')
    @if (session('message'))
        <div>
            <input type="hidden" id="hidden" name="hidden" value="hidden">
            <input type="hidden" id="message" name="message" value="{{ session('message') }}">
        </div>
    @endif
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel1">角色配置</h4>
                </div>
                <div class="modal-body">
                    <form class="floating-labels role-edit">
                        <input id="id-edit" name="id" type="hidden" value="">
                        <fieldset style="border:0;">

                            <div class="form-group m-b-40 m-t-10">
                                <input type="text" class="form-control" id="name-edit" name="name" required><span
                                        class="highlight"></span> <span class="bar"></span>
                                <label for="input1">角色名称</label>
                            </div>
                            <div class="form-group m-b-40">
                                <input type="text" class="form-control" id="display_name-edit" name="display_name"
                                       required><span
                                        class="highlight"></span> <span class="bar"></span>
                                <label for="input2">角色中文名字</label>
                            </div>
                            <div class="form-group m-b-40">
                                <input type="text" class="form-control" id="description-edit" name="description">
                                <span class="highlight"></span> <span class="bar"></span>
                                <label for="input2">角色描述</label>
                            </div>
                            <div class="skin skin-flat">
                                <div class="form-group radioInput m-b-40">
                                    <label>权限</label>
                                    @foreach(App\Permission::where('pid', 1)->get() as $value)
                                        <div class="radio-list">

                                            <label for="flat-radio-{{ $value->id }}" class="p-l-20 radio-inline p-0">
                                                <input type="checkbox" class="check" id="flat-radio-{{ $value->id }}"
                                                       name="permissions[]" value="{{ $value->id }}"
                                                       data-radio="iradio_flat-purple">
                                                {{ $value->display_name }}
                                            </label>&nbsp&nbsp|--
                                            @foreach(App\Permission::where('pid', $value->id)->get() as $values)
                                                <label for="flat-radio-{{ $values->id }}"
                                                       class="p-l-20 radio-inline p-0">
                                                    <input type="checkbox" class="check"
                                                           id="flat-radio-{{ $values->id }}"
                                                           name="permissions[]" value="{{ $values->id }}"
                                                           data-radio="iradio_flat-purple">
                                                    {{ $values->display_name }}
                                                </label>
                                            @endforeach
                                            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp--|
                                        </div>@endforeach
                                </div>
                            </div>

                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-offset-3 col-md-9">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                                </button>
                                                {!! csrf_field() !!}
                                                <button type="submit" class="btn btn-success" id="edit-role"><i
                                                            class="fa fa-check"></i> 保存
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>



    <!-- form itself -->
    <form id="test-form" class="mfp-hide white-popup-block floating-labels role-add">
        <h3>角色添加</h3>
        <hr>
        <input type="hidden" id="id-edit">
        <div class="form-group m-b-40 m-t-10">
            <input type="text" class="form-control" id="name" name="name" required><span
                    class="highlight"></span> <span class="bar"></span>
            <label for="input1">角色名称</label>
        </div>
        <div class="form-group m-b-40">
            <input type="text" class="form-control" id="display_name" name="display_name" required><span
                    class="highlight"></span> <span class="bar"></span>
            <label for="input2">角色中文名称</label>
        </div>
        <div class="form-group m-b-40">
            <input type="text" class="form-control" id="description" name="description"><span
                    class="highlight"></span> <span class="bar"></span>
            <label for="input2">角色描述</label>
        </div>
        <div class="form-actions">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-offset-3 col-md-9">
                            <button type="submit" class="btn btn-success"><i
                                        class="fa fa-check"></i> 保存
                                {!! csrf_field() !!}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </fieldset>
    </form>

    <div class="panel">
        <div class="panel-action" style="margin-top: -9px">
            <a class="popup-with-form btn fcbtn btn btn-outline btn-info btn-1c" href="#test-form">
                <span>添加角色</span>
            </a>
        </div>
    </div>
    <div class="white-box">
        <h3 class="box-title m-b-0">角色列表</h3>
        <hr>
        <div class="table-responsive">
            <table id="example23"
                   class="display nowrap table table-striped table-bordered table-hover order-column my-table "
                   cellspacing="0" width="100%" data-url="{{ url(request()->getUri()) }}">
                <thead>
                <tr>
                    <th>角色名称</th>
                    <th>角色中文名称</th>
                    <th>角色描述</th>
                    <th>编辑</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
@endsection
@section('js')
    @parent
    <!-- jQuery for carousel -->
    <script src="{{ asset('plugins/bower_components/owl.carousel/owl.carousel.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/owl.carousel/owl.custom.js') }}"></script>

    <!-- jQuery file upload -->
    <script src="{{ asset('plugins/bower_components/dropify/dist/js/dropify.min.js') }}"></script>
    <script>

        var url = $('#example23').data('url');
        var obj = $('#example23');
        obj.DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            "ordering": false,
            "processing": true,
            "responsive": false,
            "lengthMenu": [
                [10, 20, 50, 100],
                ['10 行', '20 行', '50 行', '100 行']
            ],
            "language": {
                "sProcessing": '<div id="fountainG"><div id="fountainG_1" class="fountainG"></div><div id="fountainG_2" class="fountainG"></div><div id="fountainG_3" class="fountainG"></div><div id="fountainG_4" class="fountainG"></div><div id="fountainG_5" class="fountainG"></div><div id="fountainG_6" class="fountainG"></div><div id="fountainG_7" class="fountainG"></div><div id="fountainG_8" class="fountainG"></div></div>',
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "暂无记录",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "末页"
                }
            },
            serverSide: true,
            ajax: {
                url: url,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            },
            "deferRender": true
        });
        $('.column_filter').on('change', function () {
            obj.DataTable().column($(this).data('column')).search($(this).val(), false, true).draw();
        });
        //跳转页
        $("#example23").append("  到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:27px'> 页 ");
        var oTable = $("#example23").dataTable();
        $('#changePage').keyup(function (e) {
            if ($(this).val() && $(this).val() > 0) {
                var redirectpage = $(this).val() - 1;
            } else {
                var redirectpage = 0;
            }
            $('#all').removeAttr('checked');
            $('.label-all').text('全选');
            oTable.fnPageChange(redirectpage);
        });



        $(document).ready(function () {
            var hidden = $('#hidden').val();
            if (hidden === 'hidden') {
                toastsuccess($('#message').val());
            }
        });
        $(document).ready(function () {
            $('.role-add').submit(function (e) {
                e.preventDefault();
                $.ajax({
                    type: "POST",
                    url: '/system/roles/publish',
                    data: $('.role-add').serialize(),// 你的formid
                    async: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    error: function (e) {
                        if (e.readyState === 4 && e.status === 422) {
                            for (var i in e.responseJSON) {
                                if (e.responseJSON[i] !== 'The given data was invalid.') {
                                    err = e.responseJSON[i];
                                    for (var j in err) {
                                        toasterror(err[j][0]);
                                    }
                                }
                            }
                        }
                    },
                    success: function (data) {
                        console.log(data.message);
                        if (data.status === 1) {
                            swal(data.message, '', 'success');
                            $('.confirm').click(function () {
                                location.reload();
                            });
                        } else {
                            swal(data.message);
                        }
                    }
                });
            })
        });

        //编辑
        function edit(sid) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '/system/roles/chk/' + sid,
                type: 'POST',
                success: function (data) {
                    $("#id-edit").val(data.id);
                    $("#name-edit").val(data.name);
                    $("#display_name-edit").val(data.display_name);
                    $("#description-edit").val(data.description);
                    $('.icheckbox_minimal-red').removeClass('checked').find().removeAttr('checked');
                    var permissions = data.permissions;
                    if (permissions.length) {
                        for (var i = 0; i < permissions.length; i++) {
                            $("#flat-radio-" + permissions[i]).attr('checked', 'true').parent().addClass('checked')
                        }
                    }
                    // Basic
                    $('.dropify').dropify();

                    // Translated
                    $('.dropify-fr').dropify({
                        messages: {
                            default: 'Glissez-déposez un fichier ici ou cliquez',
                            replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
                            remove: 'Supprimer',
                            error: 'Désolé, le fichier trop volumineux'
                        }
                    });

                    // Used events
                    var drEvent = $('#input-file-events').dropify();

                    drEvent.on('dropify.beforeClear', function (event, element) {
                        return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
                    });

                    drEvent.on('dropify.afterClear', function (event, element) {
                        alert('File deleted');
                    });

                    drEvent.on('dropify.errors', function (event, element) {
                        console.log('Has Errors');
                    });

                    var drDestroy = $('#input-file-to-destroy').dropify();
                    drDestroy = drDestroy.data('dropify')
                    $('#toggleDropify').on('click', function (e) {
                        e.preventDefault();
                        if (drDestroy.isDropified()) {
                            drDestroy.destroy();
                        } else {
                            drDestroy.init();
                        }
                    })
                }
            });
        }


        $('.role-edit').submit(function (e) {
            e.preventDefault();
            swal({
                    title: "",
                    text: "确定修改么？",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是的",
                    closeOnConfirm: false
                },
                function () {
                    $.ajax({
                        type: "POST",
                        url: '/system/roles/edit',
                        data: $('.role-edit').serialize(),// 你的formid
                        async: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        error: function (e) {
                            if (e.readyState === 4 && e.status === 422) {
                                for (var i in e.responseJSON) {
                                    if (e.responseJSON[i] !== 'The given data was invalid.') {
                                        err = e.responseJSON[i];
                                        for (var j in err) {
                                            toasterror(err[j][0]);
                                        }
                                    }
                                }
                            }
                        },
                        success: function (data) {
                            console.log(data.message);
                            if (data.status === 1) {
                                swal(data.message, '', 'success');
                                $('.confirm').click(function () {
                                    location.reload();
                                });
                            } else {
                                swal(data.message);
                            }
                        }
                    });
                })
        });


        //删除
        obj.on('click', '.btn-del', function () {
            var id = $(this).data('id');
            swal({
                    title: "",
                    text: "确定删除么？",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是的",
                    closeOnConfirm: false
                },
                function () {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/system/roles/del/' + id,
                        type: 'POST',
                        error: function (e) {
                            if (e.readyState === 4 && e.status === 422) {
                                for (var i in e.responseJSON) {
                                    if (e.responseJSON[i] !== 'The given data was invalid.') {
                                        err = e.responseJSON[i];
                                        for (var j in err) {
                                            toasterror(err[j][0]);
                                        }
                                    }
                                }
                            }
                        },
                        success: function (data) {
                            if (data.status !== 1) {
                                swal(data.message);
                            } else {
                                swal(data.message, '', 'success');
                                $('.confirm').click(function () {
                                    location.reload();
                                });
                            }
                        }
                    })
                }
            );
        });

    </script>
    <!-- icheck -->
    <script src="{{ asset('plugins/bower_components/icheck/icheck.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/icheck/icheck.init.js') }}"></script>
    <script src="{{ asset('js/jasny-bootstrap.js') }}"></script>
    <!-- Magnific popup JavaScript -->
    <script src="{{ asset('plugins/bower_components/Magnific-Popup-master/dist/jquery.magnific-popup.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/Magnific-Popup-master/dist/jquery.magnific-popup-init.js') }}"></script>
@endsection